<template>
	<div class="profit-chart-box">
		<div id="profitChart"></div>
	</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";
import { changeNumToWan } from "../../utils/handelScreen";

// 月份
// let xArr = ref(["中央厨房", "保教费", "伙食费", "缴费单收入", "当月核销收入"]);
let xArr = ref(["中央厨房", "缴费单收入", "当月核销收入"]);
let dataArr = ref([
	{
		value: 0,
		itemStyle: {
			color: {
				x: 0, //右
				y: 1, //下
				x2: 0, //左
				y2: 0, //上
				colorStops: [
					{
						offset: 0,
						color: "#10274B",
					},
					{
						offset: 1,
						color: "#00D5FF",
					},
				],
			},
		},
	},
	// {
	// 	value: 0,
	// 	itemStyle: {
	// 		color: {
	// 			x: 0,
	// 			y: 1,
	// 			x2: 0,
	// 			y2: 0,
	// 			colorStops: [
	// 				{
	// 					offset: 0,
	// 					color: "#4B3D10",
	// 				},
	// 				{
	// 					offset: 1,
	// 					color: "#FFD74B",
	// 				},
	// 			],
	// 		},
	// 	},
	// },
	// {
	// 	value: 0,
	// 	itemStyle: {
	// 		color: {
	// 			x: 0,
	// 			y: 1,
	// 			x2: 0,
	// 			y2: 0,
	// 			colorStops: [
	// 				{
	// 					offset: 0,
	// 					color: "#4B3910",
	// 				},
	// 				{
	// 					offset: 1,
	// 					color: "#FFB042",
	// 				},
	// 			],
	// 		},
	// 	},
	// },
	{
		value: 0,
		itemStyle: {
			color: {
				x: 0,
				y: 1,
				x2: 0,
				y2: 0,
				colorStops: [
					{
						offset: 0,
						color: "#38104B",
					},
					{
						offset: 1,
						color: "#D850FF",
					},
				],
			},
		},
	},
	{
		value: 0,
		itemStyle: {
			color: {
				x: 0,
				y: 1,
				x2: 0,
				y2: 0,
				colorStops: [
					{
						offset: 0,
						color: "#1C104B",
					},
					{
						offset: 1,
						color: "#9953FF",
					},
				],
			},
		},
	},
]);

let textStyleArr = [
	{
		color: "#D8F0FF",
		textShadow: "#3FBFFF",
	},
	// {
	// 	color: "#FFF1C0",
	// 	textShadow: "#FCD54A",
	// },
	// {
	// 	color: "#FFF9F1",
	// 	textShadow: "#FF9400",
	// },
	{
		color: "#F0BAFF",
		textShadow: "#CF4DF5",
	},
	{
		color: "#E7D7FF",
		textShadow: "#9551F9",
	},
];

let options = reactive({
	grid: {
		right: "0%",
		top: "10%",
		bottom: "15%",
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "line",
			lineStyle: {
				type: "solid",
				width: 30,
				color: "rgba(216,240,255,0.1)",
			},
		},
		backgroundColor: "rgba(216,240,255,0.1)",
		// textStyle: {
		// 	// color: "#3FBFFF",
		// 	// textShadowColor: "#3FBFFF",
		// 	textShadowBlur: 2,
		// },
		padding: [3, 12, 3, 12],
		borderWidth: 1,
		borderColor: "#6E7A83",
		formatter: (param) => {
			let res = "";
			for (let i = 0; i < param.length; i++) {
				let index = param[0].dataIndex;
				res += `<span style="color:${textStyleArr[index].color};text-shadow:0 0 2px ${textStyleArr[i].textShadow};">${param[i].value}</span>`;
			}
			return res;
		},
	},
	xAxis: {
		type: "category",
		data: xArr.value,
		axisTick: {
			show: false,
		},
		axisLine: {
			show: true,
			color: "rgba(176,215,255,0.4)",
		},
		axisLabel: {
			color: "#D3E3FF",
			interval: 0,
		},
	},
	yAxis: [
		{
			type: "value",
			name: "单位（万元）",
			nameTextStyle: {
				color: "#D3E3FF",
			},
			axisLabel: {
				color: "#D3E3FF",
			},
			splitLine: {
				lineStyle: {
					color: "rgba(176,215,255,0.25)",
					type: "dashed",
				},
			},
		},
	],
	series: [
		{
			type: "bar",
			data: dataArr.value,
			showSymbol: false,
			barWidth: 10,
			itemStyle: {
				borderRadius: [5, 5, 0, 0],
			},
		},
	],
});

let profitChartRef = null;
let initProfitChartData = (v) => {
	const {
		center_kitchen = 0,
		care_education_fees = 0,
		board_expenses = 0,
		payment_receipt_income = 0,
		write_off_income = 0,
	} = v || {};
	dataArr.value[0].value = changeNumToWan(center_kitchen);
	dataArr.value[1].value = changeNumToWan(payment_receipt_income);
	dataArr.value[2].value = changeNumToWan(write_off_income);
	// dataArr.value[1].value = changeNumToWan(care_education_fees);
	// dataArr.value[2].value = changeNumToWan(board_expenses);
	// dataArr.value[3].value = changeNumToWan(payment_receipt_income);
	// dataArr.value[4].value = changeNumToWan(write_off_income);
	profitChartRef.setOption(options);
};
const initProfitChart = (v) => {
	profitChartRef = echarts.init(document.getElementById("profitChart"));
	initProfitChartData(v);
};
defineExpose({
	initProfitChart,
});
</script>
<style lang="scss" scoped>
.profit-chart-box {
	width: 100%;
	height: 100%;
	#profitChart {
		width: 100%;
		height: 100%;
	}
}
</style>
